<template>
	<div id="sportTrend">
		<v-head></v-head>
		<v-left></v-left>

		<div class="list">
			<div id="box1">
				<div class="tubiao-title">运动人数趋势
					<el-select v-model="time1" class="qizhiDate" @change='lineChart_num()'>
						<el-option label="过去7天" value='7'></el-option>
						<el-option label="过去30天" value='30'></el-option>
						<el-option label="过去60天" value='60'></el-option>
					</el-select>
				</div>
				<div class="chart">
					<vue-highcharts :options="options_1" ref="lineCharts_1"></vue-highcharts>
					<div class="nodata" v-if="showInfo1">该时段无数据</div>
				</div>
			</div>
			<div id="box2">
				<div class="tubiao-title">运动总里程趋势
					<el-select v-model="time2" class="qizhiDate" @change='lineChart_length()'>
						<el-option label="过去7天" value='7'></el-option>
						<el-option label="过去30天" value='30'></el-option>
						<el-option label="过去60天" value='60'></el-option>
					</el-select>
				</div>
				<div class="chart">
					<vue-highcharts :options="options_2" ref="lineCharts_2"></vue-highcharts>
					<div class="nodata" v-if="showInfo2">该时段无数据</div>
				</div>
			</div>
			<div id="box3">
				<div class="tubiao-title">人均运动里程趋势
					<el-select v-model="time3" class="qizhiDate" @change="lineChart_avgLength()">
						<el-option label="过去7天" value='7'></el-option>
						<el-option label="过去30天" value='30'></el-option>
						<el-option label="过去60天" value='60'></el-option>
					</el-select>
				</div>
				<div class="chart">
					<vue-highcharts :options="options_3" ref="lineCharts_3"></vue-highcharts>
					<div class="nodata" v-if="showInfo3">该时段无数据</div>
				</div>
			</div>
		</div>

		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vHead from "../common/Header.vue";
	import vFooter from "../common/Footer.vue";
	import vLeft from "./leftSide.vue";

	export default {
		data() {
			return {
				showInfo1: false,
				showInfo2: false,
				showInfo3: false,
				time1: "30",
				time2: "30",
				time3: "30",
				options_1: {
					chart: {
						type: "line"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:人",
						align: "left"
					},
					xAxis: {},
					yAxis: {},
					tooltip: {
						headerFormat: "{point.key}:  ",
						pointFormat: "{point.y}人",
						style: {
							//display:'none'
						}
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				},
				options_2: {
					chart: {
						type: "line"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:公里",
						align: "left"
					},
					xAxis: {},
					yAxis: {},
					tooltip: {
						headerFormat: "{point.key}:  ",
						pointFormat: "{point.y}公里",
						style: {
							//display:'none'
						}
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				},
				options_3: {
					chart: {
						type: "line"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:公里",
						align: "left"
					},
					xAxis: {},
					yAxis: {},
					tooltip: {
						headerFormat: "{point.key}:  ",
						pointFormat: "{point.y}公里"
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				}
			};
		},
		mounted() {
			let sections = document.getElementById("section_box").children;
			let logo_left = document.getElementsByClassName("logo-left")[0];
			let header = document.getElementById('header');
			let random = document.querySelector(".random");
			logo_left.style.background = "#fff";
			random.style.boxShadow = "0px 0px 0px 0px rgba(0, 0, 0, 0.5)";
			header.style.boxShadow = "0px 1px 4px 0px rgba(0, 0, 0, 0.5)";
			sections[1].className = "item_active";
			document.getElementsByClassName('head_img')[0].src = "../../../static/img/dataAnalysis_icon_blue.png";
			this.lineChart_num();
			this.lineChart_length();
			this.lineChart_avgLength();
		},
		components: {
			vHead,
			vFooter,
			vLeft
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//折线图-跑步人数
			lineChart_num() {
				let url = this.$util.domain + "/dataPlatForm/general/trend/peopleNum";
				let dataArray = [];
				this.$http({
					url,
					method: "GET",
					params: {
						timeLength: this.time1
					}
				}).then(response => {
					let dataList = response.data.data;
					let lineCharts = this.$refs.lineCharts_1;
					if (response.data.error == 10000) {
						let x_options = [];
						let y_options = [];

						if (dataList.length > 0) {
							this.showInfo1 = false;
							dataList.forEach(item => {
								dataArray.push(item.runNum);
								item.recordDate = new Date(item.recordDate);
								x_options.push(item.recordDate.format("MM-dd"));
							});

							let max = Math.max.apply(null, dataArray);
							max = Math.ceil(max / 3);
							if (max < 10) {
								max = max;
							} else if (max < 100) {
								max = Math.ceil(max / 10) * 10;
							} else if (max < 1000) {
								max = Math.ceil(max / 100) * 100;
							} else if (max < 10000) {
								max = Math.ceil(max / 1000) * 1000;
							} else {
								max = Math.ceil(max / 10000) * 10000;
							}
							y_options = [0, max, 2 * max, 3 * max];

							lineCharts.getChart().yAxis[0].update({
								title: {
									text: ""
								},
								gridLineColor: "#e6e6e6",
								gridLineWidth: "1",
								min: 0,
								tickAmount: 4,
								tickPixelInterval: 60,
								tickPositions: y_options,
								gridLineDashStyle: "solid",
								labels: {
									style: {
										color: "#81868a" //纵坐标刻度文字的颜色
									}
								}
							});

							lineCharts.getChart().xAxis[0].update({
								title: {
									text: "单位：天",
									align: "high"
								},
								allowDecimals: false,
								categories: x_options,
								lineColor: "#81868a" //基线颜色
							});

							lineCharts.removeSeries();
							lineCharts.addSeries({
								data: dataArray,
								name: "",
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								lineColor: "#0cb88a",
								marker: {
									fillColor: "#0cb88a"
								},
								type: "area",
								fillColor: {
									linearGradient: [0, 0, 0, 300],
									stops: [
										[0, '#0cb88a'],
										[1, 'rgba(12,184,138,0)']
									]
								}
							});
						} else {
							lineCharts.removeSeries();
							this.showInfo1 = true;
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			// 折线图-跑步总里程
			lineChart_length() {
				let url = this.$util.domain + "/dataPlatForm/general/trend/allLength";
				let dataArray = [];
				this.$http({
					url,
					method: "GET",
					params: {
						timeLength: this.time2
					}
				}).then(response => {
					let dataList = response.data.data;
					let lineCharts = this.$refs.lineCharts_2;
					if (response.data.error == 10000) {
						let x_options = [];
						let y_options = [];
						if (dataList.length > 0) {
							this.showInfo2 = false;
							dataList.forEach(item => {
								dataArray.push(item.runDis);
								item.recordDate = new Date(item.recordDate);
								x_options.push(item.recordDate.format("MM-dd"));
							});

							let max = Math.max.apply(null, dataArray);
							max = Math.ceil(max / 3);
							if (max < 10) {
								max = max;
							} else if (max < 100) {
								max = Math.ceil(max / 10) * 10;
							} else if (max < 1000) {
								max = Math.ceil(max / 100) * 100;
							} else if (max < 10000) {
								max = Math.ceil(max / 1000) * 1000;
							} else {
								max = Math.ceil(max / 10000) * 10000;
							}
							y_options = [0, max, 2 * max, 3 * max];

							lineCharts.getChart().yAxis[0].update({
								title: {
									text: ""
								},
								gridLineColor: "#e6e6e6",
								gridLineWidth: "1",
								min: 0,
								tickAmount: 4,
								tickPixelInterval: 60,
								tickPositions: y_options,
								gridLineDashStyle: "solid",
								labels: {
									style: {
										color: "#81868a" //纵坐标刻度文字的颜色
									}
								}
							});

							lineCharts.getChart().xAxis[0].update({
								title: {
									text: "单位：天",
									align: "high"
								},
								allowDecimals: false,
								categories: x_options,
								lineColor: "#81868a" //基线颜色
							});

							lineCharts.removeSeries();
							lineCharts.addSeries({
								data: dataArray,
								name: "",
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								lineColor: "#0cb88a",
								marker: {
									fillColor: "#0cb88a"
								},
								type: "area",
								fillColor: {
									linearGradient: [0, 0, 0, 300],
									stops: [
										[0, '#0cb88a'],
										[1, 'rgba(12,184,138,0)']
									]
								}
							});
						} else {
							lineCharts.removeSeries();
							this.showInfo2 = true;
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			// 折线图-跑步人均里程
			lineChart_avgLength() {
				let url = this.$util.domain + "/dataPlatForm/general/trend/avgLength";
				let dataArray = [];
				this.$http({
					url,
					method: "GET",
					params: {
						timeLength: this.time3
					}
				}).then(response => {
					let dataList = response.data.data;
					let lineCharts = this.$refs.lineCharts_3;
					if (response.data.error == 10000) {
						let x_options = [];
						let y_options = [];
						if (dataList.length > 0) {
							this.showInfo3 = false;
							dataList.forEach(item => {
								dataArray.push(item.avgDis);
								item.recordDate = new Date(item.recordDate);
								x_options.push(item.recordDate.format("MM-dd"));
							});

							let max = Math.max.apply(null, dataArray);
							max = Math.ceil(max / 3);
							if (max < 10) {
								max = max;
							} else if (max < 100) {
								max = Math.ceil(max / 10) * 10;
							} else if (max < 1000) {
								max = Math.ceil(max / 100) * 100;
							} else if (max < 10000) {
								max = Math.ceil(max / 1000) * 1000;
							} else {
								max = Math.ceil(max / 10000) * 10000;
							}
							y_options = [0, max, 2 * max, 3 * max];

							lineCharts.getChart().yAxis[0].update({
								title: {
									text: ""
								},
								gridLineColor: "#e6e6e6",
								gridLineWidth: "1",
								min: 0,
								tickAmount: 4,
								tickPixelInterval: 60,
								tickPositions: y_options,
								gridLineDashStyle: "solid",
								labels: {
									style: {
										color: "#81868a" //纵坐标刻度文字的颜色
									}
								}
							});

							lineCharts.getChart().xAxis[0].update({
								title: {
									text: "单位：天",
									align: "high"
								},
								allowDecimals: false,
								categories: x_options,
								lineColor: "#81868a" //基线颜色
							});

							lineCharts.removeSeries();
							lineCharts.addSeries({
								data: dataArray,
								name: "",
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								lineColor: "#0cb88a",
								marker: {
									fillColor: "#0cb88a"
								},
								type: "area",
								fillColor: {
									linearGradient: [0, 0, 0, 300],
									stops: [
										[0, '#0cb88a'],
										[1, 'rgba(12,184,138,0)']
									]
								}
							});
						} else {
							lineCharts.removeSeries();
							this.showInfo3 = true;
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			}
		}
	};
</script>

<style>
	#sportTrend {
		padding-bottom: 40px;
		height: calc(100% - 60px);
		background: #f0f3f4;
	}

	#sportTrend .list {
		width: calc(100% - 290px);
		margin-left: 220px;
		margin-top: 20px;
		height: calc(100% - 140px);
	}

	#sportTrend div.module:first-child {
		border-bottom: solid 4px #20a0ff;
	}

	#sportTrend div.module:first-child>.title {
		color: #20a0ff;
	}

	.tips {
		color: red;
		font-size: 12px;
	}

	#box1,
	#box2,
	#box3 {
		clear: both;
		margin-bottom: 10px;
	}

	.timeSelect {
		display: inline-block;
		margin-top: 15px;
	}

	.search {
		margin: 0 0 15px 0;
	}

	.infoBox {
		color: #333333;
		font-size: 12px;
		background-color: #f2f2f2;
		min-height: 40px;
		line-height: 40px;
		padding-left: 20px;
		margin-bottom: 15px;
	}

	#sportTrend .qizhiDate {
		float: right;
		font-size: 12px;
		border-radius: 0;
		margin-right: 34px;
		margin-top: 12px;
	}

	.tubiao-title {
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		color: #4d4d4d;
		background-color: #f6f6f6;
		padding-left: 20px;
	}

	.nodata {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 30%;
		left: 50%;
	}

	.chart {
		border: 1px solid #e6e6e6;
		position: relative;
	}
</style>